<!-- Bootstrap -->
<link href="/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">

<!-- page content -->
<div id="modulesDiv" class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>
                    Resources page
                </h3>
            </div>
        </div>

        <div class="clearfix"></div>

        <div class="row">
            <div class="col-md-12 col-sm-12 ">
                <div class="x_panel">
                    <div class="x_title">
                        <button class="btn btn-primary" type="button" @click="initModuleAdd()"
                                data-toggle="modal" data-target="#addModal">新增</button>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="#">Settings 1</a>
                                    <a class="dropdown-item" href="#">Settings 2</a>
                                </div>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-box table-responsive">
                                    <table id="moduleTable" class="table table-striped table-bordered" style="width:100%">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Permission</th>
                                            <th>Create Date</th>
                                            <th>Operation</th>
                                        </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- resource add page & resource edit page !-->
    <div th:replace="account/resourceAdd"></div>
    <div th:replace="account/resourceEdit"></div>
</div>
<!-- /page content -->

<!-- Datatables -->
<script src="/vendors/datatables.net/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript">
    var modulesVue = new Vue({
        el: "#modulesDiv",
        data: {
            pageSize: 5,
            modulesTable: {},
            allRoles: [],
            resource: {
                id: "",
                permission: "",
                roles: [],
            },
        },
        methods: {
            RowData: function (id, permission, createDate) {
                var row = {};
                row.id = id;
                row.permission = permission;
                row.createDate = createDate;
                row.operate = function () {
                    return "<a href='#' class='btn_editcolor' data-toggle='modal' data-target='#editModal' " +
                        "onclick='initEditModal(\"" + id + "\")'>编辑</a>&nbsp;" +
                        "<a href='javascript:void(0);' onclick='deleteModule(\"" + id +
                        "\")' class='btn_editcolor'>删除</a>";
                }
                return row;
            },
            initTable: function (pageSize) {
                var self = this;
                self.modulesTable = $('#moduleTable').DataTable({
                    'paging': true, //分页
                    "serverSide": true, //开启后端分页
                    "pagingType": "full_numbers", //分页样式的类型simple/simple_numbers/full/full_numbers
                    "pageLength": pageSize, //定义初始的页长
                    "processing": true,
                    "destroy": true, //允许销毁替换，在表格重新查询时，可以自动销毁以前的data
                    'lengthChange': true, //控制是否能够调整每页的条数
                    'searching': true,
                    'data-show-refresh': true,
                    'ordering': true,
                    'autoWidth': true,
                    "ajax": function (data, callback, settings) {
                        // 从data获取查询数据
                        var columIndex = data.order[0].column;
                        var direction = data.order[0].dir;
                        var orderBy = data.columns[columIndex].name;
                        pageSize = data.length == undefined  ? pageSize : data.length;

                        var searchBean = {};
                        searchBean.currentPage = (data.start / pageSize) + 1;
                        searchBean.pageSize = pageSize;
                        searchBean.orderBy = orderBy;
                        searchBean.direction = direction;
                        searchBean.keyword = data.search.value;

                        $.ajax({
                            url : "/api/resources",
                            type : "post",
                            contentType: "application/json",
                            data : JSON.stringify(searchBean),
                            success : function (rs) {
                                // 定义表格数据结构
                                var tableData = {
                                    draw :0,
                                    recordsTotal: 0,
                                    recordsFiltered: 0,
                                    data: []
                                };
                                if (!rs) {
                                    layer.alert("请求出错，请稍后重试" + rs.errmsg, {icon: 2});
                                    callback(tableData);
                                    return;
                                };
                                if (rs.list == null) {
                                    $('#moduleTable tbody tr').remove();
                                    $('#loading').remove();
                                    callback(tableData);
                                    return;
                                }
                                $('#loading').remove();
                                var rowsData = [];
                                for (var i = 0; i < rs.list.length; i++) {
                                    //包装行数据
                                    var rowData = self.RowData(rs.list[i].id, rs.list[i].permission,
                                        rs.list[i].createDate);
                                    // 将行数据放到数组里
                                    rowsData.push(rowData);
                                }
                                tableData.data = rowsData;
                                tableData.recordsTotal = rs.total;
                                tableData.recordsFiltered = rs.total;
                                callback(tableData);
                            },
                            error : function (data) {
                                layer.alert(data.responseText, {icon: 0});
                            }
                        });
                    },
                    "columns": [ //定义行数据字段
                        {data: 'id', name: "id", sortable: true},
                        {data: 'permission', name: "permission", sortable: true},
                        {data: 'createDate', name: "create_date", sortable: true},
                        {data: 'operate', width: '80px', sortable: false}
                    ]
                });
            },
            initRoles: function() {
                var self = this;
                $.ajax({
                    url : "/api/roles",
                    type : "get",
                    success : function (rs) {
                        self.allRoles = rs;
                    },
                    error : function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                });
            },
            initModuleAdd: function () {
                this.resource = {
                    id: "",
                    permission: "",
                    roles: [],
                }
            },
            insertModule: function () {
                var self = this;
                self.resource.roles = self.resource.roles.map(item => {
                    var role = {};
                    role.id = item;
                    return role;
                });

                $.ajax({
                    url : "/api/resource",
                    type : "post",
                    contentType: "application/json",
                    data : JSON.stringify(self.resource),
                    success : function (rs) {
                        if (rs.status == 200) {
                            self.initTable(self.pageSize);
                        } else {
                            layer.alert(rs.message, {icon: 0});
                        }
                    },
                    error : function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                });
            },
            initEditModal: function (id) {
                var self = this;
                $.ajax({
                    url : "/api/resource/" + id,
                    type : "get",
                    success : function (rs) {
                        rs.roles = rs.roles.map(item => item.id);
                        self.resource = rs;
                    },
                    error : function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                });
            },
            updateModule: function () {
                var self = this;
                self.resource.roles = self.resource.roles.map(item => {
                    var role = {};
                    role.id = item;
                    return role;
                });

                $.ajax({
                    url : "/api/resource",
                    type : "put",
                    contentType: "application/json",
                    data : JSON.stringify(self.resource),
                    success : function (rs) {
                        if (rs.status == 200) {
                            self.initTable(self.pageSize);
                        } else {
                            layer.alert(rs.message, {icon: 0});
                        }
                    },
                    error : function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                });
            },
            deleteModule: function (id) {
                var self = this;
                bootbox.confirm({
                    message: "确认删除？",
                    callback: function(result){
                        if (result) {
                            $.ajax({
                                url : "/api/resource/" + id,
                                type : "delete",
                                success : function (rs) {
                                    if (rs.status == 200) {
                                        self.initTable(self.pageSize);
                                    } else {
                                        layer.alert(rs.message, {icon: 0});
                                    }
                                },
                                error : function (rs) {
                                    layer.alert(rs.responseText, {icon: 0});
                                }
                            });
                        }
                    }
                })
            }
        },
        created: function () {
            window.initEditModal = this.initEditModal;
            window.deleteModule = this.deleteModule;
        },
        mounted: function () {
            this.initTable(this.pageSize);
            this.initRoles();
        }
    });

</script>